<template>
	<view>
		<view class="guding">
			<view class="erweim">
				<view class="tishinr">出示二维码消费</view>
				<!-- <canvas id="qrcode" canvas-id="qrcode" :style="{'width': `${size}px`, 'height': `${size}px`}" /> -->
			</view>
			<view class="chaidan">
				<view :class="dqxz==0?'yixuan':'weixz'" @click="xuanzleix(0)">消费记录</view>
				<view :class="dqxz==1?'yixuan':'weixz'" @click="xuanzleix(1)">年卡信息</view>
			</view>
		</view>
		<view class="dibukegun">
			<view class="xiaofei" v-if="dqxz==0">
				<view class="xiaofjilu" v-for="(item,index) in xfjllist" :key="index">
					<view class="zuoy">
						<view class="dianming">{{item.xfmd}}</view>
						<view>消费{{item.xfcs}}次</view>
					</view>
					<view class="zuoy">
						<view class="xiamm">{{item.xfxm}}</view>
						<view class="xiamm">{{item.xfsj}}</view>
					</view>
				</view>
			</view>
			<view class="nankxx" v-if="dqxz==1">
				<view class="nianka">
					<view class="kahbt">卡号</view>
					<view>1212432432</view>
				</view>
				<view class="nianka">
					<view class="kahbt">有效期</view>
					<view>2021-11-27至2022-11-27</view>
				</view>
				<view class="nianka">
					<view class="kahbt">可用次数</view>
					<view>341</view>
				</view>
			</view>
		</view>
		<view class="dibulan">
			<view class="xiaoka">销卡</view>
			<view class="congzi">充值</view>
		</view>
	</view>
</template>

<script>
	// import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode.js'
	export default {
		data() {
			return {
				dqxz:0,
				size: 200,
				margin: 10,
				backgroundColor: '#FFFFFF',
				foregroundColor: '#000000',
				xfjllist:[{
					xfmd:'青秀万达店',
					xfcs:1,
					xfxm:'洗头',
					xfsj:'2022-2-13'
				},{
					xfmd:'广西大学店',
					xfcs:1,
					xfxm:'理发',
					xfsj:'2022-2-5'
				},{
					xfmd:'广西大学店',
					xfcs:2,
					xfxm:'洗头',
					xfsj:'2022-2-1'
				},{
					xfmd:'财经学院店',
					xfcs:1,
					xfxm:'洗头',
					xfsj:'2022-1-13'
				}]
			}
		},
		onReady() {
		//     let modules = uQRCode.getModules({
		// 		text: '123456',
		// 		errorCorrectLevel: uQRCode.errorCorrectLevel.H
		//     })
		//     let tileSize = (this.size - this.margin * 2) / modules.length
		//     // 获取绘图所需的上下文
		//     let ctx = uni.createCanvasContext('qrcode', this)
		//     // 开始绘制
		//     ctx.setFillStyle(this.backgroundColor)
		//     ctx.fillRect(0, 0, this.size, this.size)
		//     for (var row = 0; row < modules.length; row++) {
		//       for (var col = 0; col < modules.length; col++) {
		//         // 计算每一个小块的位置
		//         var x = col * tileSize + this.margin
		//         var y = row * tileSize + this.margin
		//         var w = tileSize
		//         var h = tileSize
		
		//         var style = modules[row][col] ? this.foregroundColor : this.backgroundColor
		//         ctx.setFillStyle(style)
		//         ctx.fillRect(x, y, w, h)
		//       }
		//     }
		//     ctx.draw()
		},
		methods: {
			xuanzleix(lx){
				this.dqxz = lx
			}
		}
	}
</script>

<style lang="scss" scoped>
	.guding{
		width: 100%;
		position: fixed;
		top: 44px;
		z-index: 999;
		background: #ffffff;
		.erweim{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.tishinr{
				font-weight: bold;
				font-size: 40rpx;
				color: #2C405A;
				margin: 20rpx 0;
			}
		}
		// 菜单
		.chaidan{
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 30rpx;
			.weixz{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 300rpx;
				padding-bottom: 10rpx;
				// border-bottom: solid 1rpx #2979FF;
				color: #333333;
			}
			.yixuan{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 300rpx;
				padding-bottom: 5rpx;
				color: #ff007f;
				border-bottom: solid 5rpx #ff007f;
			}
		}
	}
	.dibukegun{
		margin-top: 600rpx;
		.xiaofei{
			width: 710rpx;
			padding: 20rpx;
			.xiaofjilu{
				background: #f0f0f0;
				border-radius: 10rpx;
				padding: 10rpx 20rpx;
				margin-bottom: 20rpx;
				.zuoy{
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					margin: 10rpx 0;
					.dianming{
						font-size: 35rpx;
						font-weight: bold;
					}
					.xiamm{
						font-size: 26rpx;
						color: #333333;
					}
				}
			}
		}
		.nankxx{
			width: 690rpx;
			padding: 30rpx;
			.nianka{
				border-bottom: solid 1rpx #f0f0f0;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				.kahbt{
					font-size: 28rpx;
					color: #555555;
					margin-bottom: 10rpx;
				}
			}
		}
	}
	.dibulan{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 100rpx;
		background: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.xiaoka{
			width: 50%;
			height: 100rpx;
			background: #dcdfda;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #939393;
		}
		.congzi{
			width: 50%;
			height: 100rpx;
			background: #ff007f;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
		}
	}
</style>
